import React, {PureComponent} from "react";

class Recommend extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            datas: [
                {title: '给大家整理了一些学习资料', link: "", id: 1001},
                {title: '你能看到的数据本站均提供了开放的API', link: "", id: 1002},
                {title: '极客时间 我购买的一揽子课程', link: "", id: 1003},
                {title: 'Android 速查一切', link: "", id: 1004},
                {title: 'Android 开发高手课 文章更新学习笔记', link: "", id: 1005},
                {title: '收集的 OpenApis', link: "", id: 1006}
            ],
            show: false,
            showIndex: -1,
        };

        this.changeLiStyle = this.changeLiStyle.bind(this);
    }

    render() {
        return (
            <div style={recommendWrapper}>
                <ul style={recommendUlStyle}>
                    {this.state.datas.map((item, index) => {

                        let newStyle = (this.state.show && this.state.showIndex === index) ? rdLiOverStyle : rdLiNormalStyle;

                        return (
                            <li
                                style={newStyle}
                                key={item.id}
                                onMouseEnter={() => this.changeLiStyle(true, index)}
                                onMouseLeave={() => this.changeLiStyle(false, index)}
                            >
                                {item.title}
                            </li>
                        )
                    })}
                </ul>
            </div>
        );
    }

    changeLiStyle(bool, index) {
        let showIndex = -1;
        if (bool) {
            showIndex = index;
        }
        this.setState(() => ({
            show: bool,
            showIndex: showIndex,
        }));
    }

}

export default Recommend;

const recommendWrapper = {
    height: 106,
    marginTop: 30,
    backgroundColor: "white",
    position: "relative",
    overflow: 'hidden',
    borderRadius: 6,
    boxShadow:"2px 2px 2px #ccc",
};

const recommendUlStyle = {
    width: 846,
    height: 106,
    marginLeft: 20,
    marginTop: 10,
};

const rdLiNormalStyle = {
    height: 27,
    lineHeight: "27px",
    fontSize: 14,
    color: "#207ab6",
    display: "block",
    float: "left",
    boxSizing: "border-box",
    borderRadius: 4,
    paddingLeft: 4,
    paddingRight: 4,
    margin: 8,
    border: "solid 1px #207ab6",
};

const rdLiOverStyle = {
    height: 27,
    lineHeight: "27px",
    fontSize: 14,
    color: "white",
    display: "block",
    float: "left",
    boxSizing: "border-box",
    borderRadius: 4,
    paddingLeft: 4,
    paddingRight: 4,
    margin: 8,
    backgroundColor: "#207ab6",
    cursor: "pointer",
    border: "solid 1px #207ab6",
};